<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Golden-Layout API Test</title>
    </head>
    <body>
        <section id="bodySection">
            <section id="controls">
                <section id="registerSection">
                    <section id="registerNotVirtualSection">
                        <button id="registerNotVirtualButton" class="control" >Register Component Types</button>
                        <section id="registerNotVirtualRadioSection" class="radioLine">
                            <section class="labelledRadio">
                                <input id="registerNotVirtualAllRadio" class="control" type="radio" name="registerNotVirtualRadio">
                                <label for="registerNotVirtualAllRadio">All</label>
                            </section>
                            <section class="labelledRadio">
                                <input id="registerNotVirtualColorEventRadio" class="control" type="radio" name="registerNotVirtualRadio" checked>
                                <label for="registerVirtualColorEventRadio">Color, Event</label>
                            </section>
                        </section>
                    </section>
                    <section id="registerVirtualSection">
                        <button id="registerVirtualButton" class="control">Register Component Types As Virtual</button>
                        <section id="registerVirtualRadioSection" class="radioLine">
                            <section class="labelledRadio">
                                <input id="registerVirtualAllRadio" type="radio" name="registerVirtualRadio">
                                <label for="registerVirtualAllRadio">All</label>
                            </section>
                            <section class="labelledRadio">
                                <input id="registerVirtualTextBooleanRadio" type="radio" name="registerVirtualRadio" checked>
                                <label for="registerVirtualTextBooleanRadio">Text, Boolean</label>
                            </section>
                        </section>
                    </section>
                </section>
                <section id="eventBindingSection">
                    <span id="eventBindingSpan" title="Layout will be cleared">Event Binding:</span>
                    <section id="eventBindingRadios" class="radioLine">
                        <section class="labelledRadio">
                            <input id="eventBindingVirtualRadio" class="control" type="radio" name="eventBindingRadio" title="Layout will be cleared">
                            <label for="eventBindingVirtualRadio">Virtual</label>
                        </section class="labelledRadio">
                        <section class="labelledRadio">
                            <input id="eventBindingEmbeddedRadio" class="control" type="radio" name="eventBindingRadio" title="Layout will be cleared">
                            <label for="eventBindingEmbeddedRadio">Embedded</label>
                        </section>
                    </section>
                </section>
                <section id="clearSection">
                    <button id="clearButton" class="control">Clear</button>
                </section>
                <section id="predefinedLayoutsSection">
                    <select id="layoutSelect" class="control"></select>
                    <button id="loadLayoutButton" class="control">Load Layout</button>
                </section>
                <section id="saveAndReloadLayoutSection">
                    <button id="saveLayoutButton" class="control">Save Layout</button>
                    <button id="reloadSavedLayoutButton" class="control">Reload saved Layout</button>
                </section>
                <section id="addComponentSection">
                    <select id="registeredComponentTypesForAddSelect" class="control"></select>
                    <button id="addComponentByDragButton" class="control">D</button>
                    <button id="addComponentButton" class="control">Add Component</button>
                </section>
                <section id="rootComponentSection">
                    <button id="loadComponentAsRootButton" class="control">Load Component as Root</button>
                </section>
                <section id="replaceComponentSection">
                    <select id="registeredComponentTypesForReplaceSelect" class="control"></select>
                    <button id="replaceComponentButton" class="control">Replace Color Component with</button>
                </section>
                <section id="lastVirtualRectingCountSection">
                    <span>Last virtual recting count</span>
                    <span id="lastVirtualRectingCountSpan"></span>
                </section>
                <section id="clickCount">
                    <span>Click count: Capture: </span>
                    <span id="captureClickCountSpan"></span>
                    <span> Bubble: </span>
                    <span id="bubbleClickCountSpan"></span>
                </section>
                <section id="stackHeaderClick">
                    <span>Stack Header: </span>
                    <div id="stackHeaderClickedDiv">
                        <span>Clicked: </span>
                        <span id="stackHeaderClickedItemCountSpan"></span>
                    </div>
                </section>
            </section>
            <section id="layoutContainer">
            </section>
        </section>
    </body>
</html>
